<template>
  <div class="deparment-setting">
    <el-form>
      <el-form-item style="margin-bottom: 20px;">
        <el-button type="primary"
          size="small"
          style="float: right;"
          @click="addDepartment"
          v-has="'updatedept'">新增部门</el-button>
      </el-form-item>
      <el-form-item>
        <el-tree :data="deparment"
          :props="defaultProps"
          :render-content="renderContent"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false">
        </el-tree>
      </el-form-item>
    </el-form>
    <!-- 编辑弹窗 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="400px">
      <div class="add-update-pouple">
        <el-form label-width="90px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm">
          <div class="content">
            <el-form-item label="上级部门"
              v-if="isSub">
              <el-input type="text"
                placeholder="请输入编号"
                v-model="superiorDeptName"
                disabled
                v-filterSpecialChar></el-input>
            </el-form-item>
            <el-form-item label="部门名称"
              prop="deptName">
              <el-input type="text"
                placeholder="请输入部门名称"
                v-model="ruleForm.deptName"
                maxlength="8"
                v-filterSpecialChar></el-input>
            </el-form-item>
            <el-form-item label="是否限制楼层">
              <el-radio-group v-model="astrictType"
                :disabled="isSub && isDisabled">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="_updateDeptName('ruleForm')"
          v-has="'updatedept'">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  deleteDept,
  updateDeptName,
  getDeptstaff
} from "@/public/js/setting.js";
import { formatInput } from "@/public/js/util";
import { has } from "@/public/js/util";
export default {
  name: "DepartmentSetting",
  data() {
    return {
      formatInput: formatInput,
      ruleForm: {
        deptName: ""
      },
      rules: {
        deptName: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur"
          }
        ]
      },
      id: null,
      deparment: [],
      defaultProps: {
        children: "adminDepartments",
        label: "department"
      },

      title: "增加子部门",
      isSub: true,
      superiorDept: "", //上级部门id
      superiorDeptName: "", //上级部门名称
      deptId: "", //部门id
      astrictType: 2, //是否限制楼层
      isDisabled: false,
      dialogVisible: false
    };
  },
  created() {},

  mounted() {
    this.fetchData();
  },
  methods: {
    addDepartment() {
      this.title = "新增部门";
      this.dialogVisible = true;
      this.isSub = false;
      this.superiorDeptName = "";
      this.superiorDept = "";
      this.deptId = "";
      this.ruleForm.deptName = "";
      this.astrictType = 2;
      this.isDisabled = false;
    },
    addSubsector(data) {
      this.title = "新增子部门";

      this.isSub = true;
      this.superiorDeptName = data.department;
      this.superiorDept = data.id;
      this.astrictType = data.astrict;
      this.isDisabled = this.astrictType == 1;
      this.deptId = "";
      this.ruleForm.deptName = "";
      this.dialogVisible = true;
    },
    fetchData() {
      // window.bus.$on("departMentBackData", res => {
      //   this.deparment = res;
      // });
      getDeptstaff().then(res => {
        console.log("res", res);
        // if (res.data.errCode === 0) {
        //   const deptArray = Array.from(res.data.adminDepartments);
        //   // this.data = res.data.adminDepartments;
        //   // this.data.unshift({
        //   //   adminDepartments: null,
        //   //   id: -1,
        //   //   department: "全部部门"
        //   // });
        //   //window.bus.$emit("departMentBackData", deptArray);
        //   this.deparment = res;
        this.deparment = res.data.adminDepartments;
      });
    },
    edit(node, data) {
      this.superiorDeptName = node.parent.data.department;
      this.superiorDept = node.parent.data.id;
      this.deptId = data.id;
      this.ruleForm.deptName = data.department;
      this.dialogVisible = true;
      if (this.superiorDept) {
        this.title = "修改子部门";
        this.isSub = true;
        this.astrictType = data.astrict;

        this.isDisabled = node.parent.data.astrict == 1;
        console.log(node.parent.data);
        console.log("this.isDisabled", this.isDisabled);
      } else {
        this.title = "修改部门";
        console.log(data);
        this.astrictType = data.astrict;
        this.isDisabled = false;
        this.isSub = false;
      }
    },
    //新增修改部门
    _updateDeptName(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateDeptName({
            deptName: this.ruleForm.deptName,
            superiorDept: this.superiorDept,
            deptId: this.deptId,
            astrict: this.astrictType
          }).then(res => {
            if (!res.data.errCode) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.deparment = res.data.adminDepartments;
              this.astrictType = 2;
            }
            this.dialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    remove(node, data) {
      this.$confirm("此操作将永久删除该部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.id = data.id;
          deleteDept(this).then(res => {
            if (res.data.errCode === 0) {
              this.$message.success("部门删除成功");
              this.showPopover = false;
              this.deparment = res.data.adminDepartments;
            }
          });
        })
        .catch(() => {});
    },
    renderContent(h, { node, data, store }) {
      console.log(data);
      let updatedept = has("updatedept", this);
      let deldept = has("deldept", this);
      return (
        <span class="node-tyle">
          <span>
            <span>{node.data.department}</span>
          </span>
          <span style="width:300px;">
            <span style="padding-right:50px">
              楼层限制：{data.astrict == 2 ? "否" : "是"}
            </span>
            {updatedept ? (
              <span>
                <el-button
                  v-show={node.level !== 3}
                  style="font-size: 12px;"
                  type="text"
                  on-click={() => this.addSubsector(data)}
                >
                  添加子部门
                </el-button>
                <el-button
                  style="font-size: 12px;"
                  type="text"
                  on-click={() => this.edit(node, data)}
                >
                  修改
                </el-button>
              </span>
            ) : (
              ""
            )}
            {deldept ? (
              <span style="padding-left:10px;">
                <el-button v-show={node.data.identitys == 0}
                  style="font-size: 12px;"
                  type="text"
                  on-click={() => this.remove(node, data)}
                >
                  删除
                </el-button>
              </span>
            ) : (
              ""
            )}
          </span>
        </span>
      );
    }
  }
};
</script>
<style lang="scss">
.deparment-setting {
  position: relative;
  .el-tree-node__content {
    height: 50px;
    border-bottom: 1px solid #edf0f9;
    border-top: 1px solid #edf0f9;
  }
}
.node-tyle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
  color: #415161;
  .el-button--text {
    color: #415161;
  }
}
.node-tyle:hover {
  background-color: #f5f7fc;
}
.add-update-pouple {
  .content {
    & > .el-form-item.is-required {
      margin-bottom: 20px;
    }
    .title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
